<template>
  <div class="board-page-wrapper">
    <div class="table-wrapper">
      <div class="action-wrapper">
        <el-row>
          <el-col :span="3">
            <el-radio-group v-model="tabStatus" style="margin-bottom: 20px" @change="handleStatusChange">
              <el-radio-button label="0">通知公告</el-radio-button>
              <el-radio-button label="1">学校发文</el-radio-button>
            </el-radio-group>
          </el-col>
          <el-col :span="21">
            <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="80px">
              <el-form-item label="自定义时间段" label-width="100px">
                <el-date-picker
                  v-model="dateRange"
                  size="small"
                  style="width: 240px"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetimerange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="标题" prop="userId">
                <el-input
                  v-model="queryParams.docSubject"
                  placeholder="请输入标题"
                  clearable
                  size="small"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-form-item label="发文部门" prop="phonenumber">
                <el-select style="width: 100%;height:32px" v-model="queryParams.fdNewsSource" placeholder="请选择">
                  <el-option
                    v-for="item in departmentOptions"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
      <div class="table-content">
        <el-table :header-cell-style="{ background: '#E1ECF7' }" v-loading="loading" :data="tableList" border>
          <el-table-column label="发文部门" align="center" prop="fdName" width="360px" />
          <el-table-column label="标题" align="center" prop="docSubject" />
          <el-table-column label="创建时间" align="center" prop="docPublishTime" width="300px" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120px">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-document" @click="handleOpenDetails(scope.row)"
                >查看详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
      <el-dialog
        title="正文详情"
        :visible.sync="details.open"
        width="1300px"
        style="margin-top: 10px !important; top: 2vh;"
        append-to-body
      >
        <div class="details-dialog">
          <div style="margin-bottom: 24px">
            <div class="title-wrapper">
              <h3 class="title">{{ detailsData.quesTitle }}</h3>
              <p class="title-time">{{ detailsData.quesUserName }} {{ detailsData.createTime }}</p>
            </div>
            <p style="font-size: 16px" v-html=" detailsData.quesDescribe "></p>
          </div>
        </div>
       <div class="download-wrapper">
          <div v-for="(item,index) in detailsData.attachList" :key="item.fdFileId" v-show="detailsData.attachList.length > 0">
            <el-link @click="gotoFilePage(item.fdFileId)" type="primary" class="download-href"
              >附件{{index+1}}: {{item.fdFileName}}</el-link
            >
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import { getFeedback, listFeedback,getOaNotice,getPost } from '@/api/problem/feedback'
  import {
  	getOa
  } from '@/api/public/index.js'
  export default {
    name: 'repairOrder',
    data() {
      return {
        // 遮罩层
        loading: false,
        open: false,
        details: {
          open: false
        },
        detailsData: {},
        // 总条数
        total: 0,
        // 表格数据
        tableList: [],
        // 日期范围
        dateRange: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
        fdNewsSource:'',
        docSubject:"",
        createTime:"",
        updateTime:''


          //tabStatus: '1' // 状态
        },
        departmentOptions: [],
        tabStatus:'0',//通知公告1发文

      }
    },
    components: {},
    created() {
      this.queryParams.tabStatus = this.$route.query.id
      this.getList()
    },
    methods: {
      gotoFilePage(fdId) {
        if(fdId) {
          window.open('javascript:window.name;', '<script>location.replace("http://office.ncpu.edu.cn/sys/attachment/sys_att_main/sysAttMain.do?method=view&fdId='+fdId+'")<\/script>');
        }
      },
            //获取接口
      handleStatusChange(val) {
          console.log(val)
        this.tabStatus = val
        this.queryParams.pageNum = 1
        this.getList()
      },
      /** 查询列表 */
      getList() {
        this.loading = true
        if(this.tabStatus=='0'){
        getOaNotice(this.queryParams)
          .then(response => {
            this.tableList = response.rows
            this.total = response.total
                  	this.tableList.forEach((a, b) => {
            a.docPublishTime=rTime(a.docPublishTime)
            console.log( a.docPublishTime)
         })

          })
          .finally(() => {
            this.loading = false
          })
        }
        if(this.tabStatus=='1'){
          getPost(this.queryParams)
          .then(response => {
            this.tableList = response.rows
            this.total = response.total
                  	this.tableList.forEach((a, b) => {
            a.docPublishTime=rTime(a.docPublishTime)
         })

          })
          .finally(() => {
            this.loading = false
          })
        }
        		function rTime(date) {
							var json_date = new Date(date).toJSON();
							return new Date(new Date(json_date) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ')
								.replace(/\.[\d]{3}Z/, '')
						}


      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1
        if (this.dateRange.length>0) {
          this.queryParams.createTime = this.dateRange[0]
          this.queryParams.updateTime = this.dateRange[1]
        } else {
         // this.queryParams.params = {}
        }
        this.queryParams.fdNewsSource=
        this.getList()
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm('queryForm')
        this.queryParams.params = {}
        this.dateRange = []
        this.handleQuery()
      },
      handleOpenDetails(row) {
        	function rTime(date) {
							var json_date = new Date(date).toJSON();
							return new Date(new Date(json_date) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ')
								.replace(/\.[\d]{3}Z/, '')
						}
        this.details.open = true
          getOa(row.fdId).then(res=>{
            if (res.code === 200) {
               this.detailsData = {
              quesTitle: res.data.docSubject,
              quesUserName: res.data.fdName,
              createTime: rTime(res.data.docPublishTime),
              quesDescribe: res.data.docContent,
              attachList: res.data.oaAttachList
            }
            }
          })

        // if (!row.quesId) return
        // getFeedback(row.quesId).then(res => {
        //   if (res.code === 200) {
        //     this.details.open = true
        //     // this.detailsData = res.data
        //     // todo 详情数据
        //     this.detailsData = {
        //       quesTitle: res.data.quesTitle,
        //       quesUserName: res.data.createBy,
        //       createTime: res.data.createTime,
        //       quesDescribe: res.data.quesDescribe,
        //     }
        //   }
        // })
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  .board-page-wrapper {
    padding: 50px 38px;
    .table-wrapper {
      border-top: 2px solid #3672fe;
      background-color: #ffffff;
      .action-wrapper {
        margin-top: 20px;
      }
    }
  }
  .details-dialog {
    height: 700px;
    overflow: auto;
    font-size: 16px;
    font-weight: 500;
    color: #333333;
    line-height: 28px;
    margin: -20px 10px 20px;
    background: #f7fafd;
    padding: 32px;
    border: 1px solid #d8e2f0;
    .title-wrapper {
      margin-top: -20px;
      .title {
        text-align: center;
        font-size: 24px;
        color: #333333;
      }
      .title-time {
        margin: 0;
        text-align: right;
        color: #666666;
      }
    }
    .box-card {
      margin: 10px 0 20px;
    }
  }
  .download-wrapper {
    font-size: 18px;
    margin: 24px 12px 0;
    .download-href {
      margin-bottom: 10px;
    }
  }

</style>
<style scoped >
  >>>.el-input__inner{
    height: 32px !important;
  }
</style>
